<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%String path = request.getContextPath();%>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">

    <title>H+ 后台主题UI框架 - 主页</title>

    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">


    <link rel="shortcut icon" href="<%=path%>/static/favicon.ico">
    <link href="<%=path%>/static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="<%=path%>/static/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="<%=path%>/static/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="<%=path%>/static/layui/css/layui.css" rel="stylesheet">
    <link href="<%=path%>/static/myTreeTable/module/treetable-lay/treetable.css" rel="stylesheet">
    <style>
        #content-main {
            background-color: #F2F2F2;
        }

        .panelClose {
            transform: scaleY(0);
            transition: transform 0.8s;
            transform-origin: bottom center;
        }

        .panelOpen {
            transform: scaleY(1);
            transition: transform 0.8s;
            transform-origin: bottom center;
        }
    .layui-icon-layer:before {
    content: "";
    }
    .layui-icon-file:before {
    content: "";
    }
    </style>
</head>

<body>

    <!--内容开始-->
    <div class="layui-fluid" style="margin-top: 10px;">
        <div id="searchCard" class="layui-card"
            style="border-radius:20px;display: none;align-items: center;;box-shadow: 10px 10px 5px #cccccc;">
            <div class="layui-card-body" style="height: 60px">
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width:100px">菜单名称：</label>
                            <div class="layui-input-inline" style="width: 150px;">
                                <input type="text" id="findValue" autocomplete="off" class="layui-input">
                            </div>

                            <div class="layui-input-inline" style="margin-left: 20px;">
                                <button class="layui-btn "  lay-filter="*"
                                    style="background-color: #1AB394;color: white;border-radius:10px" id="find">搜索</button>
                                <button class="layui-btn " lay-filter="*"
                                    style="background-color: #F8AC59;color: white;border-radius:10px" id="reSet">重置</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="layui-fluid" style="margin-top: 15px;">
        <div class="layui-card" style="border-radius:20px;box-shadow: 10px 10px 5px #cccccc;padding: 5px;">
            <div class="layui-card-body">

                <div class="layui-row">
                    <table class="layui-hide" id="menu" lay-filter="menu"></table>
                    <div class="xm">
                        <div class="xm-d1">
                            <p class="xm-d1-p"></p>
                        </div>
                        <div class="xm-d2">
                            <div class="xm-d2-hang1">
                                <span class="pzright"
                                    style="display: flex;justify-content: flex-start;float:left;margin: 5px;">
                                    <p class="xm-d1-p2">
                                        <button id="add" class="layui-btn-sm layui-btn layui-btn-radius btnys"
                                            style="background-color: #1C84C6;color: white;"><i
                                                class="layui-icon">&#xe608;</i>添加</button>
                                        <button class="layui-btn layui-btn-sm" id="btn-expand"
                                            style="background-color: #1AB394;color: white;">全部展开</button>
                                        <button class="layui-btn layui-btn-sm" id="btn-fold"
                                            style="background-color: #1AB394;color: white;">全部折叠</button>
                                    </p>
                                </span>
                                <span class="layui-btn-group"
                                    style="float: right;display: flex;justify-content: flex-start;margin: 5px;">
                                    <button id="btn-refresh" type="button" class="layui-btn "
                                        style="background-color:white;border: 1px solid #DDDDDD;border-radius:10px 0 0 10px;color: #bbbbbb;size: 10px;"><i
                                            class="fa fa-refresh"></i></button>
                                    <button id="show-search" type="button" class="layui-btn "
                                        style="background-color:white;border: 1px solid #DDDDDD;border-radius:0 10px 10px 0;color: #bbbbbb;size: 10px;"><i
                                            class="fa fa-search"></i></button>

                                </span>


                            </div>
                            <div class="xm-d2-hang2">
                                <table id="permissionTable" class="layui-table" lay-filter="permissionTable"></table>
                            </div>
                        </div>
                    </div>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!--内容结束-->
</body>

    <!-- 全局js -->
    <script src="<%=path%>/static/layui/layui.all.js"></script>
    <script src="<%=path%>/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="<%=path%>/static/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="<%=path%>/static/js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="<%=path%>/static/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="<%=path%>/static/js/plugins/layer/layer.min.js"></script>
    <script src="<%=path%>/static/js/hplus.js?v=4.1.0"></script>
    <script src="<%=path%>/static/js/contabs.js"></script>
    <script src="<%=path%>/static/myjs/MyLayer.js"></script>
    <script src="<%=path%>/static/js/plugins/pace/pace.min.js"></script>
    <!--lay-event指定事件-->
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="add" style="width:57px;height:22px;background-color:#1C84C6"><i class="layui-icon">&#xe608;</i>新增</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit" style="width:57px;height:22px"><i class="fa fa-pencil-square-o" aria-hidden="true"></i>编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" style="width:57px;height:22px"><i class="fa fa-trash-o" aria-hidden="true"></i>删除</a>
  </script>
    <script>
        var layer=window.top.layer
        let iframeObj=window.iframeObj
        $("#show-search").click(function () {
            let display = $("#searchCard").css("display")
            if (display == "none") {
                $("#searchCard").css("display", "block")
                $("#searchCard").animate({ opacity: "1" }, 1000)
            } else {
                $("#searchCard").animate({ opacity: "0" }, function () {
                    $("#searchCard").css("display", "none")
                })
            }

        })
    //查找
    $("#find").click(()=>{
        renderTable();
        return false
    })
    //重置
    $("#reSet").click(()=>{
        $("#findValue").val("");
        renderTable();
        return false
    })
            var renderTable
            var path='<%=path%>/system/menu/list'
            //获取数据预处理
            //let data=myFilter(res)
            /*使用模块加载的方式 加载文件*/
            layui.config({
                base: '<%=path%>/static/myTreeTable/module/'
            }).extend({
                treetable: 'treetable-lay/treetable'
            }).use([ 'table', 'treetable'],
                function () {
                var table = layui.table;
                var treetable = layui.treetable;
                // 渲染表格
                 renderTable = function () {
                    let name=$("#findValue").val()
                    $.getJSON('<%=path%>/system/menu/list?name='+name,function (res) {
                        let data
                        if (res.msg!="ok"){
                            data=[]
                          }else{
                            data=res.data
                        }
                        data=data.map((menu)=>{
                             menu.iconName="<i class='fa "+menu.imageUrl+"'></i>"+menu.name
                            if(name!=undefined&&name!=""&&menu.id!=0){
                                 menu.parentId=0
                            }
                            return menu
                        })
                        treetable.render({
                            treeColIndex: 0,//树形图标显示在第几列
                            treeSpid: 0,//最上级的父级id
                            treeIdName: 'id',//id字段的名称
                            treePidName: 'parentId',//pid字段的名称
                            treeDefaultClose: false,//是否默认折叠
                            treeLinkage: true,//父级展开时是否自动展开所有子级
                            elem: '#permissionTable',
                            data:data,
                            //url: '<%=path%>/static/json/menu.json',
                            page: false,
                            cols: [[
                            {

                            field: 'iconName', title: '菜单名称', width: 130
                            },
                            { field: 'sort', title: '排序', width: 60, align: 'center' },
                            {
                            field: 'type', title: '类型', width: 60, align: 'center',
                                templet: function (data) {
                                let res = "";
                                if (data.type == "M") {
                                res = "目录"
                                } else if (data.type == "L") {
                                res = "链接"
                                } else if (data.type == "B") {
                                res = "按钮"
                                }
                                return res;
                            }
                            },
                            { field: 'targetValue', title: '打开方式', width: 90, align: 'center' },
                            { field: 'key', title: 'key', width: 90 },
                            { field: 'requestUrl', title: '请求地址', width: 90 },
                            { field: 'perms', title: '权限标识', width: 90 },
                            {
                            field: 'visible', title: '是否显示', width: 90,
                            templet: function (data) {
                                let res1 = `<div style="height:25px;color:white;line-height:25px;width:50px;text-align:center;background-color: #1AB394;border-radius: 5px;display: inline-block;">显示</div>`;
                                let res2 = `<div style="height:25px;color:white;line-height:25px;width:50px;text-align:center;background-color: #ED5565;border-radius: 5px;display: inline-block;">隐藏</div>`;
                                return data.visible == 0 ? res1 : res2;
                                }
                            },
                            {
                            field: 'enable', title: '状态', width: 90,
                                templet: function (data) {
                                let res1 = `<div style="height:25px;color:white;line-height:25px;width:50px;text-align:center;background-color: #1AB394;border-radius: 5px;display: inline-block;">正常</div>`;
                                let res2 = `<div style="height:25px;color:white;line-height:25px;width:50px;text-align:center;background-color: #ED5565;border-radius: 5px;display: inline-block;">停用</div>`;
                                return data.enable == 0 ? res1 : res2;
                                }
                            },
                            {  title: '操作', toolbar: '#barDemo', minWidth: 200 }
                            ]],
                            done: function () {
                            //关闭加载转圈
                            layer.closeAll('loading');
                            }
                        });
                         //触发添加
                         $('#add').click(function () {
                             layer.closeAll('iframe')
                             let layerObj=MyLayer.iframeLayer(layer, "新增菜单", "<%=path%>/system/menu/menuInput?type=add&id="+0, {
                                 "保存": formSubmit
                             },"middle",()=>{
                                 setTimeout(renderTable,500)
                             })
                         });
                         //触发展开
                         $('#btn-expand').click(function () {
                             treetable.expandAll('#permissionTable');
                         });
                         //触发折叠
                         $('#btn-fold').click(function () {
                             treetable.foldAll('#permissionTable');
                         });
                         //刷新
                         $('#btn-refresh').click(function () {
                             renderTable();
                         });
                         //监听工具条
                         table.on('tool(permissionTable)', function (obj) {
                             var data = obj.data;
                             var layEvent = obj.event;
                             //删除
                             if (layEvent === 'del') {
                                 MyLayer.confimDeleteLayer(layer,function (index) {
                                     let res=false;
                                     $.ajax({
                                         url:"<%=path%>/system/menu/remove",
                                         data:{id:data.id},
                                         async:false,
                                         success:function (data) {
                                             if(data.msg==="ok"){
                                                 res=true
                                                 renderTable()
                                                 layer.close(index)
                                                 return
                                             }
                                             layer.msg(data.msg)
                                         }
                                     })
                                 })

                             } else if (layEvent === 'edit') {
                                 layer.closeAll('iframe')
                                 MyLayer.iframeLayer(layer, "编辑菜单", "<%=path%>/system/menu/menuInput?type=edit&id="+data.id, {
                                     "保存": formSubmit
                                 },"middle",()=>{
                                     setTimeout(renderTable,500)
                                 })
                             } else if (layEvent === 'add') {
                                 layer.closeAll('iframe')
                                 let layerObj=MyLayer.iframeLayer(layer, "新增菜单", "<%=path%>/system/menu/menuInput?type=parentAdd&id="+data.parentId, {
                                     "保存": formSubmit
                                 },"middle",()=>{
                                    setTimeout(renderTable,500)
                                 })
                             }
                         });
                 })
                 }
                 renderTable()
        })

        //提交，点击ifrme内提交按钮，监听关闭弹窗
        function formSubmit(index) {
            let formSubmit=layer.getChildFrame('#departSubmit', index);
            $(formSubmit).click();
            return false
        }

    </script>
</body>

</html>